<template>
	<view>
		<view class="text-df bg-white  padding-sm " style="border-radius: 0 0 20rpx 20rpx">
			<view v-if="detail.exchangeStatus=='0'" class="">
				<view class="flex-row">
					<view class="iconfont icon-shijian " style="font-size: 40rpx;"></view>
					<view class="text-lg">待领取</view>
				</view>
			</view>
			<view v-else class="text-low">已领取</view>
		</view>

		<view class="text-df bg-white margin-top-com padding-sm border-radius-sm">
			<view class="margin-bottom-sm flex-row-bt">
				<view class="flex-row">
					<image :src="imgURL+ detail.exchangeItemVOs[0].indexImg" mode="aspectFill"
						style="width: 200rpx; height: 180rpx; border-radius: 20rpx;" class=""></image>
					<view style="width: 450rpx;" class="margin-left-xs padding-tb-xs">
						<!-- <view class="text-lg">{{good.title}}</view>
						<view class=" text-sm text-low margin-top-lg">订单号： {{}}</view> -->
						<view class="flex-row-bt ">
							<view class="text-lg">{{detail.exchangeItemVOs[0].productName}}</view>
							<view class="text-lg theme-color text-bold ">{{detail.exchangeItemVOs[0].monovalent}}积分</view>
						</view>
						<view class="flex-row-bt text-sm text-low margin-top-lg">
							<view class="">{{detail.exchangeItemVOs[0].color}} &nbsp;&nbsp; {{detail.exchangeItemVOs[0].size}}</view>
							<view class="">×{{detail.exchangeItemVOs[0].productNumber}}</view>
						</view>
					</view>
				</view>
			</view>

			<view class="" style="float: right;">
				<view class="flex-row">
					<view class="text-low text-sm" style="line-height: 50rpx;">共{{detail.productNumber}}件，</view>
					<text class="text-low text-sm" style="line-height: 50rpx;">总共：</text>
					<text class="text-lg theme-color text-bold ">{{detail.totalPrice}}积分</text>
				</view>

			</view>
			<view style="height: 40rpx;" class=""></view>

			<view class="margin-top-lg flex-row-bt " style="width: 100%;" @click="navigator()">
				<view style="width: 640rpx;" class="">兑换地点：{{detail.exchangeLocation}}</view>
				<view
					style="background-color: #5090f1; border-radius: 50%; text-align: center; width: 40rpx; height: 40rpx;">
					<view class="iconfont icon-daohang text-white" style="font-size: 30rpx; line-height: 42rpx;">
					</view>
				</view>
			</view>

			<view style="width: 100%;" class="flex-row-bt  margin-top-sm ">
				<view class="margin-right-xs">下单时间 :</view>
				<view>{{detail.createTime}}</view>
			</view>

		</view>

		<!-- <view class="text-df bg-white margin-top-sm padding-sm border-radius-sm">
			<view class="">订单信息</view>
			<view class="flex-row-bt margin-top-sm text-sm">
				<view class="text-low">订单编号:</view>
				<view>{{detail.id}}</view>
			</view>
			<view class="flex-row-bt margin-top-xs text-sm">
				<view class="text-low">下单时间:</view>
				<view>{{detail.createTime}}</view>
			</view>
		</view> -->


		<!-- 待取 -->
		<view style="bottom: 0; position: fixed; width: 100%;" class="bg-white padding-xs"
			v-if="detail.exchangeStatus=='0'">
			<view class="flex-row" style=" float: right;">
				<view @click="comfirm" class="theme-color text-sm border-radius"
					style="border: 1px solid #EE3F4D; padding: 8rpx 26rpx;">
					确认收货
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { imgURL } from '../../../api/request';
	import { reactive, ref } from 'vue';
	import { onLoad } from "@dcloudio/uni-app"
	import { getExchangeInfo } from '../../../api/point/point';
	import { exchange_updateStatus } from '../../../api/exchange/exchange';

	const detail = ref(
		{
			"id": "1",
			"productName": "九阳豆浆机",
			"monovalent": "500",
			"productNumber": 2,
			"totalPrice": "1000",
			"userId": "1",
			"color": "白色",
			"size": "",
			"specifications": "",
			"timeSlot": "",
			"timeInterval": "",
			"exchangeStatus": "0",
			"createTime": "2024-03-28 16:52",
			"exchangeLocation": "萍乡市安源区萍安北大道安源镇敬老院",
			"indexImg": "/profile/product/2024/03/28/91dc7a52-8077-44e1-a46e-f33be984c762_20240328142343A002.jpg"
		}
	)

	//经纬度
	const tude = reactive({
		longitude: '',
		latitude: ''
	})

	onLoad((option) => {
		getExchangeInfo({
			exchangeId: option.id
		}).then((res : any) => {
			detail.value = res.data
		})
		//获取经纬度
		getTude()
	})

	//确认收获
	const comfirm = () => {
		exchange_updateStatus({
			exchangeId: parseInt(detail.value.id)
		}).then((res : any) => {
			if (res.code == 200) {
				uni.showToast({
					title: '收货成功',
					icon: 'none',
					duration: 2000
				});
				getExchangeInfo({
					exchangeId: detail.value.id
				}).then((res : any) => {
					detail.value = res.data
				})
			}
		})
	}

	//导航
	const navigator = () => {
		wx.openLocation({
			latitude: Number(tude.latitude),
			longitude: Number(tude.longitude),
			name: detail.value.exchangeLocation,
			scale: 12
		})
	}

	//获取经纬度
	const getTude = () => {
		uni.request({
			url: 'https://restapi.amap.com/v3/geocode/geo?parameters',
			method: 'GET',
			data: {
				key: '84b002e324e6d4e5e6b9541c6cbf8b71',
				address: detail.value.exchangeLocation
			},
			success: (res) => {
				console.log(JSON.stringify(res.data))
				tude.longitude = res.data.geocodes[0].location.split(',')[0]  //经度
				tude.latitude = res.data.geocodes[0].location.split(',')[1]  //维度
				console.log(tude.longitude, tude.latitude)

			}
		})
	}
</script>

<style lang="scss">
	page {
		background-color: #f7f7f7;
	}
</style>
